<template>
	<view class="order">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'我的订单'"></Hearder>
		<!-- #endif -->
		<u-transition :show="show">
			<view class="content">
				<view class="order_t">
					<text @click="changetype('all')" :class="type=='all'?'act':''">全部</text>
					<text @click="changetype('payment')" :class="type=='payment'?'act':''">待付款</text>
					<text @click="changetype('forwarding')" :class="type=='forwarding'?'act':''">待发货</text>
					<text @click="changetype('received')" :class="type=='received'?'act':''">待收货</text>
					<text @click="changetype('completed')" :class="type=='completed'?'act':''">已完成</text>
				</view>
				<view class="order_m">
					<view class="every bgbottom" style="margin-top: 50rpx;" v-if="loading" v-for="item in 3">
						<view class="order_title">
							<u-skeleton
								rows="1"
								:title="false"
								:rowsHeight="['50rpx']"
								:rowsWidth="['100%']"
								:loading="loading"
								animate
							></u-skeleton>
						</view>
						<view class="detail_con clearfix">
							<u-skeleton
								rows="1"
								:title="false"
								:rowsHeight="['200rpx']"
								:rowsWidth="['200rpx']"
								:loading="loading"
								animate
							></u-skeleton>
							<view class="detail_right">
								<view class="box_top">
									<u-skeleton
										rows="1"
										:title="false"
										:rowsHeight="['50rpx']"
										:rowsWidth="['100%']"
										:loading="loading"
										animate
									></u-skeleton>
								</view>
								<view class="box_bottom">
									<u-skeleton
										rows="1"
										:title="false"
										:rowsHeight="['50rpx']"
										:rowsWidth="['100%']"
										:loading="loading"
										animate
									></u-skeleton>
								</view>
							</view>
						</view>
					</view>
					<view class="every bgbottom" v-if="!loading" v-for="item in orderlist" :key="item.order_id">
						<view class="order_title">
							<view>订单编号:{{item.order_no}}</view>
							<view>{{item.pay_status}}</view>
						</view>
						<view class="detail_con clearfix" v-for="value in item.goods" :key="item.goods_id" 
						@click="toPage('orderdetail?order_id='+item.order_id+'&status='+item.data_type)">
							<image :src="value.goods_image"></image>
							<view class="detail_right">
								<view class="box_top">
									<view class="title">{{value.goods_name}}</view>
									<view class="shop_sku" v-if="value.goods_attr">{{value.goods_attr}}</view>
								</view>
								<view class="box_bottom">
									<view v-if="item.order_type==1">￥{{value.goods_price}}</view>
									<view v-if="item.order_type==2">{{value.goods_price}}积分</view>
									<view>X{{value.total_num}}</view>
								</view>
							</view>
						</view>
						<view class="bot_box">
							<view class="first_box" v-if="item.data_type=='payment' || item.data_type=='forwarding'" @click="quxiao(item.order_id)">取消订单</view>
							<view class="first_box" v-if="item.data_type=='received'" @click="toPage('wuliu?order_id='+item.order_id)">查看物流</view>
							<view class="first_box" v-if="item.data_type=='completed'" @click="delorder(item.order_id)">删除订单</view>
							<view class="tow_box" v-if="item.data_type=='payment'" @click="$u.throttle(paymoney(item.order_id,item.pay_type), 1000)">去支付</view>
							<view class="tow_box" v-if="item.data_type=='forwarding'" @click="remind(item.order_id)">提醒发货</view>
							<view class="tow_box" v-if="item.data_type=='received'" @click="receipt(item.order_id)">确认收货</view>
						</view>
					</view>
				</view>
				<view class="nidata" v-if="orderlist.length==0 && !loading">
					<image src="../../static/images/noimg.png"></image>
				</view>
			</view>
		</u-transition>
		<shopro-login-modal :showLogin="showLogin" @loginhidden="loginhidden"></shopro-login-modal>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				type:'all',
				orderlist:[],
				choosepay:false,
				loading:true,
				orderId:'',
				show:true,
				showLogin:false
			}
		},
		onLoad(options) {
			var that = this
			if(options.type){
				this.type= options.type || this.$route.query.type
			}
		},
		onShow() {
			this.getinit()
		},
		methods:{
			getinit(){
				this.request('/order/getShopList',{dataType:this.type}).then(res => {
					if(res.data.code==-500){
						this.showLogin=true
					}
					if(res.data.code==1){
						this.orderlist = res.data.data.list
					}
					this.loading = false;
				})
			},
			changetype(type){
				this.type = type
				this.show = true;
				this.loading = true;
				this.getinit()
			},
			Choosepay(data){
				this.choosepay=data
			},
			remind(order_id){
				this.request('/order/toRemindDeliver',{order_id:order_id}).then(res => {
					this.$tip(res.data.msg)
				})
			},
			quxiao(order_id){
				this.request('/order/cancel',{order_id:order_id}).then(res => {
					if(res.data.code==1){
						this.$tip(res.data.msg)
						this.getinit()
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			receipt(order_id){
				this.request('/order/receipt',{order_id:order_id}).then(res => {
					if(res.data.code==1){
						this.$tip(res.data.msg)
						this.getinit()
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			delorder(order_id){
				//增加删除提示框
				var that = this;
				uni.showModal({
				    title: '删除提示',
				    content: '确认删除这个订单吗？',
				    success: function (res) {
				        if (res.confirm) {
				           that.request('/order/removeOrder',{order_id:order_id}).then(res => {
				           	if(res.data.code==1){
				           		that.$tip(res.data.msg)
				           		that.getinit()
				           	}else{
				           		that.$tip(res.data.msg)
				           	}
				           })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			paymoney(order_id,pay_type){
				this.request('/order/toPayGoods',{order_id:order_id,pay_type:pay_type}).then(res => {
					if(res.data.code==1){
						this.$tip(res.data.msg)
						this.request('/pay/pointsPayment',{trade_no:res.data.data.order_sn}).then(res => {
							if(res.data.code==1){
								this.getinit()
							}else{
								this.$tip(res.data.msg)
							}
						})
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			loginhidden(data){
				this.showLogin=data
			},
			toPage(route){
				uni.navigateTo({
				    url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.order{
		.content{
			.order_t{
				position: fixed;
				top: 0;
				/* #ifdef APP-PLUS */
				top: 110rpx;
				padding-top: 30rpx;
				/* #endif */
				width: 100%;
				display: flex;
				background: #fff;
				z-index: 66;
				border-bottom: $uni-border-bottom;
				text{
					padding: 26rpx 0;
					text-align: center;
					width: 20%;
					position: relative;
					font-size: 28rpx;
				}
				.act{
					color: $uni-item-color;
				}
				.act::after{
					content:'';
					position: absolute;
					bottom: 0;
					width: 38rpx;
					height: 4rpx;
					background-color: $uni-item-color;
					border-radius: 2rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
			.order_m{
				padding-top: 80rpx;
				/* #ifdef H5 */
				padding-top: 90rpx;
				/* #endif */
				.every{
					padding: 0 4%;
					background: #fff;
					.order_title{
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 82rpx;
						border-bottom: $uni-border-bottom;
						view{
							font-size: 26rpx;
							color: #999;
							&:last-of-type{
								color: $uni-text-color;
							}
						}
					}
					.detail_con{
						height: 188rpx;
						padding: 32rpx 0;
						box-sizing: content-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						>image{
							float: left;
							width: 188rpx;
							height: 100%;
							border-radius: 10rpx;
						}
						.detail_right{
							float: left;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							width: calc(100% - 208rpx);
							height: 188rpx;
							margin-left: 20rpx;
							.box_top{
								.title{
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp:2;
									/*! autoprefixer: off */
									-webkit-box-orient: vertical;
									/* autoprefixer: on */
									font-size: 26rpx;
									line-height: 39rpx;
								}
								.shop_sku{
									line-height: 28rpx;
									margin-top: 10rpx;
									color: #999;
									font-size: 24rpx;
								}
							}
							.box_bottom{
								display: flex;
								justify-content: space-between;
								align-items: center;
								view{
									font-size: 28rpx;
									&:last-of-type{
										color: #999;
										font-size: 30rpx;
									}
								}
							}
						}
					}
					.bot_box{
						display: flex;
						justify-content: flex-end;
						border-top: $uni-border-bottom;
						padding: 20rpx 0;
						view{
							width: 160rpx;
							height: 60rpx;
							text-align: center;
							line-height: 60rpx;
							font-size: 26rpx;
							color: #999;
							margin-left: 3%;
							box-sizing: border-box;
						}
						.first_box{
							border: 2rpx solid #999;
						}
						.tow_box{
							background: $uni-item-color;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
